<template>
    <div>
        <el-button type="primary" size="large" @click="showAddClassify = true">添加分类</el-button>
        <el-dialog v-model="showAddClassify" title="添加分类" width="40%">
            <el-form :model="form" label-width="80px" status-icon :rules="rules" ref="ruleFormRef">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="form.cat_name" />
                </el-form-item>
                <el-form-item label="父级分类">
                    <el-cascader v-model="classifyList" :options="catList" :props="props" size="large"
                        :key="cascaderKey" :show-all-levels="false" @change="changeClassify" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="onsubmit(ruleFormRef)">
                        提交
                    </el-button>
                    <el-button @click="closeDialog(ruleFormRef)">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, ref, defineProps } from 'vue';
import { getCategories, addClassify } from "@/api/goods";
import { ElMessage, ElMessageBox } from "element-plus";
let props2 = defineProps({
    getList: {
        type: Function,
    }
})
let showAddClassify = ref(false)
let form = reactive({});
let ruleFormRef = ref(null);
let cascaderKey = ref(null);
form.cat_pid = 0;
form.cat_level = 0;
let classifyList = reactive([]);
let catList = reactive([]);
const props = {
    expandTrigger: "hover",
    value: "cat_id",
    label: "cat_name",
    children: "children",
    checkStrictly: true,
};
let rules = {
    cat_name: [
        { required: true, message: "分类名称不能为空", trigger: "blur" },
    ],
};
(async () => {
    let res = await getCategories({ type: 2 });
    catList.push(...res.data);
})();
const closeDialog = (ruleFormRef = null) => {
    if (ruleFormRef != null) ruleFormRef.resetFields();
    showAddClassify.value = false;
};
const changeClassify = () => {
    cascaderKey.value++;
}
const onsubmit = (ruleFormRef) => {
    ruleFormRef.validate(async (isValid) => {
        if (isValid) {
            if (classifyList.length) {
                form.cat_level = classifyList.length;
                form.cat_pid = classifyList.pop()
            }
            let res = await addClassify(form);
            ElMessageBox.alert(res.meta.msg, "", {
                // if you want to disable its autofocus
                // autofocus: false,
                confirmButtonText: "确认",
                callback: () => {
                    ElMessage({
                        type: res.meta.status == 201 ? "success" : "error",
                        message: res.meta.status == 201 ? "添加成功" : "添加失败",
                    });
                },
            });
            closeDialog(ruleFormRef);
            props2.getList();
        }
        // ruleFormRef.resetFields();
    });
};
</script>

<style lang="scss" scoped>

</style>